<!--编辑器模块-->
<div ms-controller="MDEditor">
    <!--工具栏-->
    <div class="navbar navbar-default navbar-editor">
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
                <a href="" class="dropdown-toggle tool-item" data-toggle="dropdown" role="button" aria-expanded="false">
                    标题 <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a  class="tool-item" ms-click="h1">标题1</a></li>
                    <li><a  class="tool-item" ms-click="h2">标题2</a></li>
                    <li><a class="tool-item" ms-click="h3">标题3</a></li>
                    <li><a class="tool-item" ms-click="h4">标题4</a></li>
                    <li><a class="tool-item" ms-click="h5">标题5</a></li>
                </ul>

            </li>
            <li>
                <a class="tool-item" ms-click="bold">粗体</a>
            </li>
            <li>
                <a class="tool-item" ms-click="Italic">斜体</a>
            </li>
            <li>
                <a class="tool-item"  data-toggle="modal" data-target="#links">连接</a>
            </li>
            <li>
                <a class="tool-item" ms-click="quote">引用</a>
            </li>
            <li>
                <a class="tool-item" ms-click="code">代码</a>
            </li>
            <li>
                <a class="tool-item" data-toggle="modal" data-target="#img">图片</a>
            </li>
            <li class="dropdown">
                <a href="" class="dropdown-toggle tool-item" data-toggle="dropdown" role="button" aria-expanded="false">
                    列表 <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a class="tool-item" ms-click="ol">有序列表</a></li>
                    <li><a class="tool-item" ms-click="ul">无序列表</a></li>

                </ul>

            </li>

            <li>
                <a class="tool-item" ms-click="divider">分割线</a>
            </li>
            <li>
                <a class="tool-item" ms-click="paragraph">分段</a>
            </li>
        </ul>
        <ul class="nav navbar-nav pull-right">
            <li>
                <a  title="专注书写模式" class="to-write tool-item" ms-click="toWrite">
                    <i class="icon-edit"></i>

                </a>
            </li>
            <li>
                <a  title="实时预览模式" class="to-both  tool-item " ms-click="toBoth">
                    <i class="icon-columns"></i>
                </a>
            </li>
            <li>
                <a  title="纯净阅读模式" class="to-read tool-item " ms-click="toRead">
                    <i class="icon-desktop"></i>
                </a>
            </li>
        </ul>
    </div>
    <!--模态框-->

    <!--插入链接模态框-->
    <div class="modal fade" id="links" tabindex="-1" role="dialog" aria-labelledby="links" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">插入连接</h4>
                </div>
                <div class="modal-body">
                    请输入连接地址：<br/>
                    <input type="text" class="form-control" ms-duplex="link"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ms-click="links">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!--插入图片模态框-->
    <div class="modal fade" id="img" tabindex="-1" role="dialog" aria-labelledby="links" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >插入图片</h4>
                </div>
                <div class="modal-body">
                    请输入连接地址：<br/>
                    <input type="text" class="form-control" ms-duplex="link"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ms-click="img">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!--输入区-->
    <div class="row">
        <!--左侧输入区-->
        <div id="doc-main-layout" class="doc-layout col-sm-6">


            <!--文章表单-->

            <textarea class=" alive-hover live-sroll" id="doc-main"
                      placeholder="开始书写..." autofocus ms-duplex="md" ms-on-keyup="trs" ></textarea>

        </div>
        <!--右侧预览区-->
        <div id="doc-show-layout" class="doc-layout col-sm-6">

            <div id="doc-show" class="alive-hover markdown-preview live-sroll">


            </div>

        </div>
        <div id="read-only" hidden="hidden" class="markdown-preview">

        </div>
    </div>
</div>

